<template>
	<view class="tabbar">
		<view @click="changIndex" :data-currindex="index" v-for="(item, index) in tabs" 
		:key="index" :class="['tabbar-item', current === index && 'tabbar-item--active']" v-if="item.isdisplay">
			<text>{{item.title}}</text>
			<view class="tabbar-item__line"></view>
			<view v-if="item.badge && item.isbadgedisplay" class="tabbar-item__badge">
				<text>{{item.badge}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			tabs: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				current: 0
			}
		},
		methods: {
			changIndex(e) {
				//debugger
				let dataset = e.currentTarget.dataset;
				this.current = dataset.currindex;
				//console.log(this.tabs[this.current]);
				let eventParams = {
					current: this.current,
					title: this.tabs[this.current].title
				};
				this.$emit("tabChange", eventParams)
			}
		}
	}
</script>
<style lang="scss">
	@import './index.scss';
</style>
